<!doctype html>
<html ondragstart="return false">
 <head>
     <meta charset="UTF-8">
     <meta name="Keywords" content="关键字">
     <meta name="Description" content="描述">
     <title>网页标题</title>
	 <style>
		*{
			margin:0;
			padding:0;
		}

	  body{
	   font-size:12px;
	   font-family:"微软雅黑";
	  }
	  #box{
		position:absolute;
		width:400px;
		height:300px;
		background-color:green;
		min-width:20px;
        min-height:20px;
	  }
	  span{
		position:absolute;
		width:20px;
		height:20px;
		background-color:blue;
	  }
	  #box .top{
		left:50%;
		top:0;
		transform:translateX(-50%);
	  }
	  #box .rt{
		left:100%;
		transform:translateX(-100%);
	  }
	  #box .left{
		top:50%;
		transform:translateY(-50%);
	  }
	  #box .right{
        top:50%;
		transform:translateY(-50%);
		right:0;
	  }
	  #box .lb{
		bottom:0;
	  }
	  #box .bottom{
        left:50%;
		transform:translateX(-50%);
		bottom:0;
	  }
	  #box .rb{
        bottom:0;
		right:0;
	  }
	 </style>
 </head>
 <body>
		<div id='box'>
			<span class='lt'></span>
            <span class='top'></span>
            <span class='rt'></span>
            <span class='left'></span>
            <span class='right'></span>
            <span class='lb'></span>
            <span class='bottom'></span>
            <span class='rb'></span>
		</div>
 </body>
 <script>
		var oBox = document.getElementById('box');
		document.addEventListener('mousedown',function(e){
			e = e||window.event;
			var target = e.target||e.srcElement;
			var name = target.className;
			var startX = target.offsetLeft;
			var startY = target.offsetTop;
			var movestartX = e.clientX;
            var movestartY = e.clientY;
			var boxwidth = oBox.clientWidth;
			var boxheight = oBox.clientHeight;
			var boxleft = oBox.offsetLeft;
			var boxtop = oBox.offsetTop;
			document.addEventListener('mousemove',move);
			function move(e){
				var x = e.clientX-movestartX;
				var y = e.clientY-movestartY;
				switch(name){
					case 'lt':
							oBox.style.width = boxwidth - x + 'px'; 
							oBox.style.height = boxheight - y + 'px';
							oBox.style.left = boxleft + x + 'px'; 
							oBox.style.top = boxtop + y + 'px';
							break;
					case 'top':
							oBox.style.height = boxheight - y + 'px'; 
							oBox.style.top = boxtop + y + 'px';
							break;
					case 'rt':
							oBox.style.width = boxwidth + x + 'px'; 
							oBox.style.height = boxheight - y + 'px';
							oBox.style.top = oBox.style.top + y + 'px';
							break;
					case 'left':
							oBox.style.width = boxwidth - x + 'px'; 
							oBox.style.left = boxleft + x + 'px'; 
							break;
					case 'right':
							oBox.style.width = boxwidth + x + 'px'; 
							break;
					case 'lb':
							oBox.style.width = boxwidth - x + 'px'; 
							oBox.style.height = boxheight + y + 'px';
							oBox.style.left = boxleft + x + 'px'; 
							break;
					case 'bottom':
							oBox.style.height = boxheight + y + 'px';
							break;
					case 'rb':
							oBox.style.width = boxwidth + x + 'px'; 
							oBox.style.height = boxheight + y + 'px';
							break;
					default:oBox.style.left = boxleft + x + 'px'; 
							oBox.style.top = boxtop + y + 'px';
				}
	       }
		   document.addEventListener('mouseup',function(e){
				document.removeEventListener('mousemove',move);
				document.removeEventListener('mouseup',arguments.callee);
		   });
		});
		
        
 </script>
</html>